<?php
echo $this->Html->script(array(
	'plugins/highcharts/js/highcharts',
	'plugins/highcharts/js/modules/exporting',
	'plugins/select/select2.min',
	'plugins/validationEngine/languages/jquery.validationEngine-en.js',
	'plugins/validationEngine/jquery.validationEngine.js'
		), array('inline' => false));
?>
<?php
echo $this->Form->create('Keyword', array(
	'class' => 'validate',
	'action' => 'report',
	'url' => $this->request->here(false),
	'type' => 'post',
	'inputDefaults' => array('label' => false, 'div' => false)));
echo $this->Form->input('Paginate.task', array('style' => 'display:none;', 'value' => '', 'id' => 'task'));
?>
<div class="page-header">
	<div class="icon">
		<span class="ico-pen-2"></span>
	</div>
	<h1>
		<?php echo __('KEYWORD'); ?> <small>
			<small><?php echo __('Thống kê từ khóa '); ?>
				<?php
				echo $this->Html->link($keyword['Keyword']['name'], array(
					'controller' => 'keywords', 'action' => 'edit', $keyword['Keyword']['id']
				));
				?>
			</small>
		</small>
	</h1>
	<div class="page-toolbar">
		<div class="btn-group ctr-container">
			<button class="btn btn-primary btn-info ctr-back" type="button">
				<span class="ico-remove"></span>
				<?php echo __('Back'); ?>
			</button>
		</div>
	</div>
</div>
<div class="row-fluid">
	<?php echo $this->Session->flash(); ?>
</div>
<div class="row-fluid">

	<div class="span11">  
		<div class="data">
			<div id="keyword_chart" style="height: 400px;">

			</div>                                
		</div>
	</div>

</div>
<div class="page-header">
	<div class="icon">
		<span class="ico-layout-7"></span>
	</div>
	<h1>
		<?php echo __('TASK'); ?> 
		<small><?php echo __('Liên kết '); ?>
			<?php
			$link = Keyword::mainLink($keyword['Keyword']['url']);
			echo $this->Html->link($link, array(
				'controller' => 'keywords', 'action' => 'task_index', '?' => array('url' => $link)
			));
			?>
		</small>
	</h1>
	<div class="page-toolbar">
		<div class="btn-group ctr-container">
			<button class="btn btn-primary ctr-add" type="submit">
				<span class="ico-add"></span>
				<?php echo __('Add new task'); ?>
			</button>
		</div>
	</div>
</div>
<?php
echo $this->element('Task/index');
echo $this->Form->end();
?>
<script type="text/javascript">
	(function($) {

		$(function() {
			var unknow = '<span style="color:red;font-weight:700">> 100</span>';
			var chart = new Highcharts.Chart({
				credits: {
					enabled: false
				},
				chart: {
					renderTo: 'keyword_chart',
					type: 'line',
					marginRight: 10,
					marginBottom: 25
				},
				title: {
					text: 'Thống kê vị trí của từ khóa',
					x: -20 //center
				},
				subtitle: {
					text: <?php echo json_encode($keyword['Keyword']['name']); ?>,
					x: -20
				},
				xAxis: {
					categories: <?php echo json_encode(array_keys($reports)); ?>
				},
				yAxis: {
					labels: {
						formatter: function() {
							if (this.value > 100) {
								return unknow;
							}
							if (this.value === 1) {
								return 'Top';
							}
							return this.value;
						}
					},
					reversed: true,
					title: {
						text: 'Google Keyword Position (>100 to unknow)'
					},
					allowDecimals: false,
					min: 1,
					max: <?php echo max(array_values($reports)) + 1; ?>,
					plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
				},
				tooltip: {
					formatter: function() {
						var y = this.y > 100 ? unknow : this.y;
						return '<b>' + this.series.name + '</b> : ' + y + '<br/>Vào ngày ' + this.x;
					}
				},
				legend: {
					enabled: false
				},
				series: [{
						name: 'Vị trí',
						data: <?php echo json_encode(array_values($reports)); ?>
					}]
			});
		});

	})(jQuery);
</script>